import React, { StrictMode, useState, useRef, useImperativeHandle, useContext, useEffect, useMemo } from 'react'
import { useSelector, useDispatch } from "react-redux"
const boxStyle = {
  margin: '10px',
  border: '1px solid #ccc',
  borderRadius: '10px',
  padding: '10px',
}

const ulStyle = {
  margin: '10px',
  height: '300px',
  overflow: 'auto',
  border: '1px solid #ccc',
  borderRadius: '10px',
  padding: '10px',
  flexGrow:'1',
}
const imgStyle = {
  width: '20px',
  height: '20px',
}

import store from '../reduxjs_toolkit/index'
// react-redux是react和redux的链接器
import { Provider } from 'react-redux'
// 导入action生成函数
import { increment, decrement, incrementByAmount, fetchUserData, getHotList } from '../reduxjs_toolkit/modules/store_task'
import { fetchPosts11 } from '../reduxjs_toolkit/modules/store_posts'

import { delName } from '../reduxjs_toolkit/modules/store_logo'
export class ReduxToolkitTemplate extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      str: '单层使用conText',
      name: 'Guest',
      userProvide: { password: '232323' },
    }

    this.handleChange = (event) => {
      this.setState({ name: event.target.value })
    }
  }
  componentDidMount() {
    console.log('conTextTemplate...')

  }
  render() {
    return (
      <Provider store={store} >
        <div style={boxStyle}>
          <p>简单使用redux_toolkit处理全局处理数据</p>
          <div>
            <p>这是父组件啊啊</p>
            <p>使用redux中数据:{ }</p>
            <SonA></SonA>
            <SonB>
              <Grandson></Grandson>
            </SonB>
          </div>
        </div>
      </Provider>
    )
  }
}

function SonA(props) {
  const { taskList, count } = useSelector((state) => state.task)
  const dispatch = useDispatch()
  return (
    <div style={boxStyle}>
      <p>这是子组件A</p>
      <p>使用redux中数据:{count}</p>
      <button aria-label="Increment value" onClick={() => dispatch(increment())}>
        Increment
      </button>
      <button aria-label="Decrement value" onClick={() => dispatch(decrement())} >
        Decrement
      </button>
      <button onClick={() => dispatch(incrementByAmount(10))}>
        修改
      </button>
      <button onClick={() => dispatch(fetchUserData())}>
        百度热榜
      </button>
    </div >
  )
}

function SonB(props) {
  // 函数组件没有this, 可以通过props.children获取标签内部的子组件
  // 
  const { taskList, count } = useSelector((state) => state.task)
  const { name } = useSelector((state) => state.logo)
  const dispatch = useDispatch()
  return (
    <div style={boxStyle}>
      <p>这是子组件B</p>
      <p>使用redux.task中数据:{count}</p>
      <p>使用redux.logo中数据:{name}</p>
      {props.children}
    </div>
  )
}



function Grandson(props) {
  const { taskList, count, userInfo } = useSelector((state) => state.task)
  const { error, status, posts } = useSelector((state) => state.posts)
  const hotList = useSelector(getHotList)
  const { name } = useSelector((state) => state.logo)
  const dispatch = useDispatch()
  const memoizedPosts = useMemo(() => {
    return posts
  }, [posts])
  return (
    <div style={boxStyle}>
      <p>这是子组件</p>
      <p>使用redux.task中数据:{count}---{JSON.stringify(userInfo)}</p>
      <p>使用redux.logo中数据:{name}</p>
      <button aria-label="Increment value" onClick={() => dispatch(increment())}>
        Increment
      </button>
      <button aria-label="Decrement value" onClick={() => dispatch(decrement())} >
        Decrement
      </button>
      <button onClick={() => dispatch(incrementByAmount(10))}>
        修改
      </button>
      <button onClick={() => dispatch(delName())}>logoOut</button>
      <button onClick={() => dispatch(fetchPosts11())}>
        百度明生榜
      </button>
      <p>请求状态:{status} 请求错误:{error ? error : '无'}</p>
      <div style={{display: 'flex'}}>
        <ul style={ulStyle}>{
          hotList.map((item, index) => {
            return <li key={item.id}>
              <img style={imgStyle} src={item.expression} alt="" />
              {item.word}
            </li>
          })
        }</ul>
        <ul style={ulStyle}>{
          memoizedPosts.map((item, index) => {
            return <li key={item.index}>
              <img style={imgStyle} src={item.hotTagImg} alt="" />
              {item.word}
            </li>
          })
        }</ul>
      </div>

    </div>
  )
}
